<template>
  <div style="width: 100%;height: 90%"><!--数据统计-->
    <div style="width: 100%;height: 50%;display: flex"><!--上半部分-->
      <div style="width: 30%;height: 95%;margin: auto"><!--左上部分-->
        <div style="width: 100%;height: 50%"><!--左上上半部分-->
          <div style="width: 100%;height: 20%;font-size: 1rem;color: rgba(94, 104, 162, 1);background-image: url('/dev-api/profile/background/编组 26.png');background-size: 100% 100%;background-repeat: no-repeat;display: flex">
            <div style="width: 5%;margin: auto"/>
            <div style="width: 95%;height: 60%;margin: auto">预警情况</div>
          </div>

          <dv-border-box-7 style="width: 100%;height: 70%;margin: auto">
            <div style="width: 100%;height: 32%;font-size: 1.2rem;line-height: 1.2rem;color: rgba(255, 255, 255, 0.8);background-image: url('/dev-api/profile/background/矩形.png');background-size: 100% 100%;background-repeat: no-repeat;display: flex">
              <div style="width: 6%;height: 75%;background-image: url('https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng4b69f409fd81c211bea44153b0f30e40426c6af55c1c0a5b7daf85145876081e');background-size: 100% 100%;background-repeat: no-repeat;margin: auto"/>
              <div style="width: 80%;margin: auto">预警总数</div>
            </div>
            <div style="width: 100%;height: 2%"/>
            <div style="width: 100%;height: 32%;font-size: 1.2rem;line-height: 1.2rem;color: rgba(255, 255, 255, 0.8);background-image: url('/dev-api/profile/background/矩形.png');background-size: 100% 100%;background-repeat: no-repeat;display: flex">
              <div style="width: 6%;height: 75%;background-image: url('https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8a9c00e8e2ac8462dd3406b0f7860304d327fde5ef2ce2ccf7f12a4294d07420');background-size: 100% 100%;background-repeat: no-repeat;margin: auto"/>
              <div style="width: 80%;margin: auto">待处理预警数</div>
            </div>
            <div style="width: 100%;height: 2%"/>
            <div style="width: 100%;height: 32%;font-size: 1.2rem;line-height: 1.2rem;color: rgba(255, 255, 255, 0.8);background-image: url('/dev-api/profile/background/矩形.png');background-size: 100% 100%;background-repeat: no-repeat;display: flex">
              <div style="width: 6%;height: 75%;background-image: url('https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng19be41bde90a09983be6d5be74d87b40413a21e26254b0c4c5c4f526e978e2e3');background-size: 100% 100%;background-repeat: no-repeat;margin: auto"/>
              <div style="width: 80%;margin: auto">紧急告警数</div>
            </div>
          </dv-border-box-7>
        </div><!--左上上半部分-->

        <div style="width: 100%;height: 50%"><!--左上下半部分-->
          <div style="width: 100%;height: 20%;font-size: 1rem;color: rgba(94, 104, 162, 1);background-image: url('/dev-api/profile/background/编组 26.png');background-size: 100% 100%;background-repeat: no-repeat;display: flex">
            <div style="width: 5%;margin: auto"/>
            <div style="width: 95%;height: 60%;margin: auto">设备用户数</div>
          </div>

          <dv-border-box-7 style="width: 100%;height: 80%;margin: auto;display: flex">
            <div style="width: 100%;height: 25%;display: flex">
              <div style="width: 50%;height: 95%;color: rgba(255, 255, 255, 0.8);background-image: url('/dev-api/profile/background/矩形.png');background-size: 100% 100%;background-repeat: no-repeat;margin: auto;display: flex">
                <div style="width: 10%;margin: auto"/>
                <div style="width: 90%;margin: auto">心电设备</div>
              </div>
              <div style="width: 50%;height: 95%;color: rgba(255, 255, 255, 0.8);background-image: url('/dev-api/profile/background/矩形.png');background-size: 100% 100%;background-repeat: no-repeat;margin: auto;display: flex">
                <div style="width: 10%;margin: auto"/>
                <div style="width: 90%;margin: auto">血压设备</div>
              </div>
            </div>

            <div style="width: 100%;height: 25%;display: flex">
              <div style="width: 50%;height: 95%;color: rgba(255, 255, 255, 0.8);background-image: url('/dev-api/profile/background/矩形.png');background-size: 100% 100%;background-repeat: no-repeat;margin: auto;display: flex">
                <div style="width: 10%;margin: auto"/>
                <div style="width: 90%;margin: auto">血氧设备</div>
              </div>
              <div style="width: 50%;height: 95%;color: rgba(255, 255, 255, 0.8);background-image: url('/dev-api/profile/background/矩形.png');background-size: 100% 100%;background-repeat: no-repeat;margin: auto;display: flex">
                <div style="width: 10%;margin: auto"/>
                <div style="width: 90%;margin: auto">血压设备</div>
              </div>
            </div>

            <div style="width: 100%;height: 25%;display: flex">
              <div style="width: 50%;height: 95%;color: rgba(255, 255, 255, 0.8);background-image: url('/dev-api/profile/background/矩形.png');background-size: 100% 100%;background-repeat: no-repeat;margin: auto;display: flex">
                <div style="width: 10%;margin: auto"/>
                <div style="width: 90%;margin: auto">心电设备</div>
              </div>
              <div style="width: 50%;height: 95%;color: rgba(255, 255, 255, 0.8);background-image: url('/dev-api/profile/background/矩形.png');background-size: 100% 100%;background-repeat: no-repeat;margin: auto;display: flex">
                <div style="width: 10%;margin: auto"/>
                <div style="width: 90%;margin: auto">制氧设备</div>
              </div>
            </div>

            <div style="width: 100%;height: 25%;display: flex">
              <div style="width: 50%;height: 100%;color: rgba(255, 255, 255, 0.8);background-image: url('/dev-api/profile/background/矩形.png');background-size: 100% 100%;background-repeat: no-repeat;margin: auto;display: flex">
                <div style="width: 10%;margin: auto"/>
                <div style="width: 90%;margin: auto">睡眠监测设备</div>
              </div>
              <div style="width: 50%;height: 100%;color: rgba(255, 255, 255, 0.8);background-image: url('/dev-api/profile/background/矩形.png');background-size: 100% 100%;background-repeat: no-repeat;margin: auto;display: flex">
                <div style="width: 10%;margin: auto"/>
                <div style="width: 90%;height: 100%;margin: auto">防跌倒监测设备</div>
              </div>
            </div>
          </dv-border-box-7>
        </div><!--左上下半部分-->
      </div><!--左上部分-->

      <div style="width: 35%;height: 95%;margin: auto"><!--中上部分-->
        <div style="width: 100%;height: 10%;font-size: 1rem;color: rgba(94, 104, 162, 1);background-image: url('/dev-api/profile/background/编组 26.png');background-size: 100% 100%;background-repeat: no-repeat;display: flex">
          <div style="width: 5%;margin: auto"/>
          <div style="width: 95%;height: 60%;margin: auto">预警情况统计</div>
        </div>

        <dv-border-box-7 style="width: 100%;height: 90%">
          <div style="width: 100%;height: 50%;display: flex">
            <div style="width: 80%;height: 100%;margin: auto;display: flex">
              <div id="option3" style="width: 20%;height: 100%;margin: auto"/>
              <div id="option4" style="width: 20%;height: 100%;margin: auto"/>
              <div id="option5" style="width: 20%;height: 100%;margin: auto"/>
              <div id="option6" style="width: 20%;height: 100%;margin: auto"/>
              <div id="option7" style="width: 20%;height: 100%;margin: auto"/>
            </div>
            <div style="width: 20%;height: 100%;margin: auto">
              <div style="width: 100%;height: 10%;display: flex">
                <div class="tabs" :style="{color: fontColor1[0], margin: 'auto'}" @click="tabClick1">本日</div>
                <div class="tabs" :style="{color: fontColor1[1], margin: 'auto'}" @click="tabClick2">本月</div>
                <div class="tabs" :style="{color: fontColor1[2], margin: 'auto'}" @click="tabClick3">累计</div>
              </div>
              <div style="width: 100%;height: 90%">
                <div style="width: 100%;height: 5%"/>
                <div style="width: 100%;height: 19%;color: rgba(255, 255, 255, 0.8)">
                  心电设备
                </div>
                <div style="width: 100%;height: 19%;color: rgba(255, 255, 255, 0.8)">
                  血压设备
                </div>
                <div style="width: 100%;height: 19%;color: rgba(255, 255, 255, 0.8)">
                  血氧设备
                </div>
                <div style="width: 100%;height: 19%;color: rgba(255, 255, 255, 0.8)">
                  血糖设备
                </div>
                <div style="width: 100%;height: 19%;color: rgba(255, 255, 255, 0.8)">
                  睡眠监测
                </div>
              </div>
            </div>
          </div>

          <div style="width: 100%;height: 50%;display: flex">
            <div id="option1" style="width: 50%;height: 100%;margin: auto"/>
            <div id="option2" style="width: 50%;height: 100%;margin: auto"/>
          </div>
        </dv-border-box-7>
      </div><!--中上部分-->

      <div style="width: 30%;height: 95%;margin: auto"><!--右上部分-->
        <div style="width: 100%;height: 10%;font-size: 1rem;color: rgba(94, 104, 162, 1);background-image: url('/dev-api/profile/background/编组 26.png');background-size: 100% 100%;background-repeat: no-repeat;display: flex">
          <div style="width: 5%;margin: auto"/>
          <div style="width: 95%;height: 60%;margin: auto">新发生预警</div>
        </div>

        <dv-border-box-7 style="width: 100%;height: 90%">
          <div style="width: 100%;height: 10%;display: flex">
            <div class="tabs" :style="{color: fontColor2[0], margin: 'auto'}" @click="tabClick4">紧急</div>
            <div class="tabs" :style="{color: fontColor2[1], margin: 'auto'}" @click="tabClick5">待处理</div>
            <div class="tabs" :style="{color: fontColor2[2], margin: 'auto'}" @click="tabClick6">已处理</div>
          </div>

          <div style="width: 100%;height: 90%">
            <div style="width: 100%;height: 10%;color: rgba(255, 255, 255, 0.8);background-image: url('/dev-api/profile/background/矩形.png');background-size: 100% 100%;background-repeat: no-repeat;display: flex">
              <div style="width: 5%;margin: auto"/>
              <div style="width: 95%;margin: auto">防跌倒监测设备</div>
            </div>
            <div style="width: 100%;height: 10%;color: rgba(255, 255, 255, 0.8);background-image: url('/dev-api/profile/background/矩形.png');background-size: 100% 100%;background-repeat: no-repeat;display: flex">
              <div style="width: 5%;margin: auto"/>
              <div style="width: 95%;margin: auto">防跌倒监测设备</div>
            </div>
            <div style="width: 100%;height: 10%;color: rgba(255, 255, 255, 0.8);background-image: url('/dev-api/profile/background/矩形.png');background-size: 100% 100%;background-repeat: no-repeat;display: flex">
              <div style="width: 5%;margin: auto"/>
              <div style="width: 95%;margin: auto">防跌倒监测设备</div>
            </div>
            <div style="width: 100%;height: 10%;color: rgba(255, 255, 255, 0.8);background-image: url('/dev-api/profile/background/矩形.png');background-size: 100% 100%;background-repeat: no-repeat;display: flex">
              <div style="width: 5%;margin: auto"/>
              <div style="width: 95%;margin: auto">防跌倒监测设备</div>
            </div>
            <div style="width: 100%;height: 10%;color: rgba(255, 255, 255, 0.8);background-image: url('/dev-api/profile/background/矩形.png');background-size: 100% 100%;background-repeat: no-repeat;display: flex">
              <div style="width: 5%;margin: auto"/>
              <div style="width: 95%;margin: auto">防跌倒监测设备</div>
            </div>
            <div style="width: 100%;height: 10%;color: rgba(255, 255, 255, 0.8);background-image: url('/dev-api/profile/background/矩形.png');background-size: 100% 100%;background-repeat: no-repeat;display: flex">
              <div style="width: 5%;margin: auto"/>
              <div style="width: 95%;margin: auto">防跌倒监测设备</div>
            </div>
            <div style="width: 100%;height: 10%;color: rgba(255, 255, 255, 0.8);background-image: url('/dev-api/profile/background/矩形.png');background-size: 100% 100%;background-repeat: no-repeat;display: flex">
              <div style="width: 5%;margin: auto"/>
              <div style="width: 95%;margin: auto">防跌倒监测设备</div>
            </div>
            <div style="width: 100%;height: 10%;color: rgba(255, 255, 255, 0.8);background-image: url('/dev-api/profile/background/矩形.png');background-size: 100% 100%;background-repeat: no-repeat;display: flex">
              <div style="width: 5%;margin: auto"/>
              <div style="width: 95%;margin: auto">防跌倒监测设备</div>
            </div>
            <div style="width: 100%;height: 10%;color: rgba(255, 255, 255, 0.8);background-image: url('/dev-api/profile/background/矩形.png');background-size: 100% 100%;background-repeat: no-repeat;display: flex">
              <div style="width: 5%;margin: auto"/>
              <div style="width: 95%;margin: auto">防跌倒监测设备</div>
            </div>
            <div style="width: 100%;height: 10%;color: rgba(255, 255, 255, 0.8);background-image: url('/dev-api/profile/background/矩形.png');background-size: 100% 100%;background-repeat: no-repeat;display: flex">
              <div style="width: 5%;margin: auto"/>
              <div style="width: 95%;margin: auto">防跌倒监测设备</div>
            </div>
          </div>
        </dv-border-box-7>
      </div><!--右上部分-->
    </div><!--上半部分-->

    <div style="width: 100%;height: 50%;display: flex"><!--下半部分-->
      <div style="width: 30%;height: 95%;margin: auto"><!--左下部分-->
        <div style="width: 100%;height: 10%;font-size: 1rem;color: rgba(94, 104, 162, 1);background-image: url('/dev-api/profile/background/编组 26.png');background-size: 100% 100%;background-repeat: no-repeat;display: flex">
          <div style="width: 5%;margin: auto"/>
          <div style="width: 95%;height: 60%;margin: auto">设备用户分布</div>
        </div>

        <dv-border-box-7 style="width: 100%;height: 90%">
          <div id="device_user" style="width: 100%;height: 100%"/>
        </dv-border-box-7>
      </div><!--左下部分-->

      <div style="width: 35%;height: 95%;margin: auto"><!--中下部分-->
        <div style="width: 100%;height: 10%;font-size: 1rem;color: rgba(94, 104, 162, 1);background-image: url('/dev-api/profile/background/编组 26.png');background-size: 100% 100%;background-repeat: no-repeat;display: flex">
          <div style="width: 5%;margin: auto"/>
          <div style="width: 95%;height: 60%;margin: auto">设备佩戴统计</div>
        </div>

        <dv-border-box-7 style="width: 100%;height: 90%">
          <el-table style="width: 100%;height: 90%;background-color:transparent" :header-cell-style="{background: 'transparent'}" :data="userList">
            <el-table-column label="排名" align="center" prop="id"/>
            <el-table-column label="用户" align="center" prop="userName"/>
            <el-table-column label="预警次数" align="center" prop="alarmTime"/>
            <el-table-column label="佩戴天数" align="center" prop="wearDay"/>
            <el-table-column label="绑定设备" align="center" prop="device"/>
            <el-table-column label="最近使用" align="center" prop="createTime" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createTime, "{y}.{m}.{d}") }}</span>
              </template>
            </el-table-column>
          </el-table>
        </dv-border-box-7>
      </div><!--中下部分-->

      <div style="width: 30%;height: 95%;margin: auto"><!--右下部分-->
        <div style="width: 100%;height: 10%;font-size: 1rem;color: rgba(94, 104, 162, 1);background-image: url('/dev-api/profile/background/编组 26.png');background-size: 100% 100%;background-repeat: no-repeat;display: flex">
          <div style="width: 5%;margin: auto"/>
          <div style="width: 95%;height: 60%;margin: auto">预警趋势</div>
        </div>

        <dv-border-box-7 style="width: 100%;height: 90%">
          <div id="early_warning_trends" style="width: 100%;height: 100%"/>
        </dv-border-box-7>
      </div><!--右下部分-->
    </div><!--下半部分-->
  </div><!--数据统计-->
</template>

<script>
import dataV from '@jiaminghi/data-view'
import * as echarts from "echarts";
import Vue from "vue";

Vue.use(dataV)

export default {
  name: "Statistics",
  data() {
    return {
      option1_date: {
        color: ['rgba(115,176,255,0.5)'],
        xAxis: {
          axisLabel: {
            color: 'rgba(255, 255, 255, 0.8)'
          },
          data: ["心电", "血压", "血氧", "血糖", "睡眠"]
        },
        yAxis: {
          axisLabel: {
            color: 'rgba(255, 255, 255, 0.8)'
          },
        },
        series: [{
          type: 'bar',
          barWidth: '25%',
          data: [1000, 800, 600, 400, 200]
        }]
      },
      option2_date: {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            color: 'rgba(255, 255, 255, 0.8)'
          },
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '30%'],
          axisLabel: {
            color: 'rgba(255, 255, 255, 0.8)'
          },
        },
        series: [
          {
            type: 'line',
            smooth: 0.6,
            symbol: 'none',
            lineStyle: {
              color: 'rgba(115,176,255,0.5)',
              width: 2
            },
            data: [['0:00', 75], ['3:00', 50], ['6:00', 76], ['9:00', 70], ['12:00', 85], ['15:00', 55], ['18:00', 120],],
          }
        ]
      },
      option3_date: {
        title: {
          text: '心电',
          left: 'center',
          top: 'center',
          textStyle: {//文字配置
            color: "rgb(50,197,233)",//文字颜色
            fontSize: 15,//字号
            align: "center"//对齐方式
          }
        },
        color: ['rgb(190 205 244)', '#0f0f6c'],
        series: [
          {
            type: 'pie',
            radius: ['70%', '80%'],
            label: {
              show: false,
              position: 'center'
            },
            data: [
              {value: 33, name: 'Search Engine'},
              {value: 67, name: 'Direct'},
            ]
          }
        ]
      },
      option4_date: {
        title: {
          text: '血压',
          left: 'center',
          top: 'center',
          textStyle: {//文字配置
            color: "rgb(50,197,233)",//文字颜色
            fontSize: 15,//字号
            align: "center"//对齐方式
          }
        },
        color: ['rgb(190 205 244)', '#0f0f6c'],
        series: [
          {
            type: 'pie',
            radius: ['70%', '80%'],
            label: {
              show: false,
              position: 'center'
            },
            data: [
              {value: 33, name: 'Search Engine'},
              {value: 67, name: 'Direct'},
            ]
          }
        ]
      },
      option5_date: {
        title: {
          text: '血氧',
          left: 'center',
          top: 'center',
          textStyle: {//文字配置
            color: "rgb(50,197,233)",//文字颜色
            fontSize: 15,//字号
            align: "center"//对齐方式
          }
        },
        color: ['rgb(190 205 244)', '#0f0f6c'],
        series: [
          {
            type: 'pie',
            radius: ['70%', '80%'],
            label: {
              show: false,
              position: 'center'
            },
            data: [
              {value: 33, name: 'Search Engine'},
              {value: 67, name: 'Direct'},
            ]
          }
        ]
      },
      option6_date: {
        title: {
          text: '血糖',
          left: 'center',
          top: 'center',
          textStyle: {//文字配置
            color: "rgb(50,197,233)",//文字颜色
            fontSize: 15,//字号
            align: "center"//对齐方式
          }
        },
        color: ['rgb(190 205 244)', '#0f0f6c'],
        series: [
          {
            type: 'pie',
            radius: ['70%', '80%'],
            label: {
              show: false,
              position: 'center'
            },
            data: [
              {value: 33, name: 'Search Engine'},
              {value: 67, name: 'Direct'},
            ]
          }
        ]
      },
      option7_date: {
        title: {
          text: '睡眠',
          left: 'center',
          top: 'center',
          textStyle: {//文字配置
            color: "rgb(50,197,233)",//文字颜色
            fontSize: 15,//字号
            align: "center"//对齐方式
          }
        },
        color: ['rgb(190 205 244)', '#0f0f6c'],
        series: [
          {
            type: 'pie',
            radius: ['70%', '80%'],
            label: {
              show: false,
              position: 'center'
            },
            data: [
              {value: 33, name: 'Search Engine'},
              {value: 67, name: 'Direct'},
            ]
          }
        ]
      },
      device_user_data: {
        color: ['rgba(115,176,255,0.5)'],
        xAxis: {
          axisLabel: {
            color: 'rgba(255, 255, 255, 0.8)'
          },
          data: ["心电", "血压", "血氧", "血糖", "睡眠"]
        },
        yAxis: {
          axisLabel: {
            color: 'rgba(255, 255, 255, 0.8)'
          },
        },
        series: [{
          type: 'bar',
          barWidth: '25%',
          data: [1000, 800, 600, 400, 200]
        }]
      },
      early_warning_trends_data: {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            color: 'rgba(255, 255, 255, 0.8)'
          },
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '30%'],
          axisLabel: {
            color: 'rgba(255, 255, 255, 0.8)'
          },
        },
        series: [
          {
            type: 'line',
            smooth: 0.6,
            symbol: 'none',
            lineStyle: {
              color: 'rgba(115,176,255,0.5)',
              width: 2
            },
            data: [['0:00', 75], ['3:00', 50], ['6:00', 76], ['9:00', 70], ['12:00', 85], ['15:00', 55], ['18:00', 120],],
          }
        ]
      },
      userList: [
        {id: 1, userName: 'a', alarmTime: 3, wearDay: 5, device: '心电设备', createTime: '2023.1.1'},
        {id: 2, userName: 'b', alarmTime: 3, wearDay: 5, device: '心电设备', createTime: '2023.1.1'},
      ],
      fontColor1: [
        'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)',
      ],
      fontColor2: [
        'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)',
      ],
    };
  },
  mounted() {
    this.fontColor1 = ['rgba(190, 205, 244, 1)', 'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)',];
    this.fontColor2 = ['rgba(190, 205, 244, 1)', 'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)',];

    let myEcharts1 = echarts.init(document.getElementById('option1'));
    myEcharts1.setOption(this.option1_date);

    let myEcharts2 = echarts.init(document.getElementById('option2'));
    myEcharts2.setOption(this.option2_date);

    let myEcharts3 = echarts.init(document.getElementById('option3'));
    myEcharts3.setOption(this.option3_date);

    let myEcharts4 = echarts.init(document.getElementById('option4'));
    myEcharts4.setOption(this.option4_date);

    let myEcharts5 = echarts.init(document.getElementById('option5'));
    myEcharts5.setOption(this.option5_date);

    let myEcharts6 = echarts.init(document.getElementById('option6'));
    myEcharts6.setOption(this.option6_date);

    let myEcharts7 = echarts.init(document.getElementById('option7'));
    myEcharts7.setOption(this.option7_date);



    let myEcharts13 = echarts.init(document.getElementById('device_user'));
    myEcharts13.setOption(this.device_user_data);

    let myEcharts14 = echarts.init(document.getElementById('early_warning_trends'));
    myEcharts14.setOption(this.early_warning_trends_data);
  },
  methods: {
    tabClick1() { // 中上部分每日
      this.fontColor1 = ['rgba(190, 205, 244, 1)', 'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)',];

    },
    tabClick2() { // 中上部分每月
      this.fontColor1 = ['rgba(94, 104, 162, 1)', 'rgba(190, 205, 244, 1)', 'rgba(94, 104, 162, 1)',];

    },
    tabClick3() { // 中上部分累计
      this.fontColor1 = ['rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)', 'rgba(190, 205, 244, 1)'];

    },
    tabClick4() { // 右上部分每日
      this.fontColor2 = ['rgba(190, 205, 244, 1)', 'rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)',];

    },
    tabClick5() { // 右上部分每月
      this.fontColor2 = ['rgba(94, 104, 162, 1)', 'rgba(190, 205, 244, 1)', 'rgba(94, 104, 162, 1)',];

    },
    tabClick6() { // 右上部分累计
      this.fontColor2 = ['rgba(94, 104, 162, 1)', 'rgba(94, 104, 162, 1)', 'rgba(190, 205, 244, 1)'];

    },
  }
}
</script>

<style lang="scss">
.tabs:hover {
  cursor: pointer;
}
.el-table tr {
  background-color: transparent;
}
</style>
